<template>
	<view>
		<view class="page-head-list">
			<view class="page-head-list-item">
				<strong class="page-head-list-item-num">{{benefit_info.not_expired_benefit}}</strong>
				<view class="page-head-list-item-text">待作废余额</view>
			</view>
			<view class="page-head-list-item">
				<strong class="page-head-list-item-num">{{benefit_info.invalid_benefit}}</strong>
				<view class="page-head-list-item-text">已作废余额</view>
			</view>
		</view>
		<view class="store-cont">
			<view class="store-cont-title">账户历史</view>
			<view class="store-cont-list">
				<view class="store-cont-list-item" v-for="(item,index) in orderList" :key="index">
					<view class="store-cont-list-item-top">
						<view class="store-cont-list-item-left">
							<view class="store-cont-list-item-left-text">{{item.title}}</view>
							<view class="store-cont-list-item-left-time">{{item.benefit}}</view>
						</view>
						<view class="store-cont-list-item-right">
							<view class="store-cont-list-item-right-text">{{item.create_time_text}}</view>
							<view class="store-cont-list-item-right-time">{{item.state_text}}</view>
						</view>
					</view>
					<view class="store-cont-list-item-bottom">{{item.end_time_text}} 失效</view>
				</view>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderList:[],
				page:1,
				total_pages:1,
				loadMoreStatus:1,
				benefit_info:{
					invalid_benefit:0,
					not_expired_benefit:0
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(type){
				let that = this
				if(that.page <= that.total_pages){
					jewel.get('agent_jewel/getUnrecordedBenefits',{page:that.page},true,function(res){
						if(type=='loadMore'){
							that.orderList = that.orderList.concat(res.data.data)
						}else{
							that.orderList = res.data.data
							that.benefit_info.invalid_benefit = res.data.invalid_benefit
							that.benefit_info.not_expired_benefit = res.data.not_expired_benefit
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1 ? 2:0
						}
					})
				}else{
					that.loadMoreStatus = 2
				}
			}
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		}
	}
</script>

<style lang="scss">
	
	.page-head{
		&-list{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			background-color: #d8f8de;
			width: 680rpx;
			height: 126rpx;
			margin: 0 auto{
				top: 32rpx;
				bottom: 46rpx;
			};
			border-radius: 10rpx;
			&-item{
				flex: 1;
				color: #1e9a1b;
				&-num{
					font-size: 40rpx;
					font-weight: bold;
				}
				&-text{
					font-size: 30rpx;
				}
			}
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				margin-top: -27rpx;
				left: 50%;
				width: 2rpx;
				height: 54rpx;
				background-color: #1e9a1b;
			}
		}
		&-btn{
			width: 170rpx;
			text-align: center;
			line-height: 56rpx;
			height: 56rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 10rpx;
		}
	}
	
	.store-cont{
		&-title{
			color: #323232;
			font-size: 32rpx;
			position: relative;
			padding-left: 56rpx;
			margin-bottom: 22rpx;
			&::after{
				content: '';
				position: absolute;
				width: 4rpx;
				height: 32rpx;
				background-color: #f65754;
				left: 30rpx;
				top: 50%;
				margin-top: -16rpx;
			}
		}
		&-list{
			padding: 0 42rpx;
			&-item{
				position: relative;
				background-color: #f8f8f8;
				border-radius: 10rpx;
				padding: 0 24rpx;
				margin-bottom: 20rpx;
				&-left{
					&-text{
						font-size: 32rpx;
						color: #1d1d1d;
					}
					&-time{
						font-size: 34rpx;
						font-weight: bold;
						color: #1e9a1b;
					}
				}
				&-right{
					text-align: right;
					&-text{
						font-size: 26rpx;
						color: #bbbbbb;
					}
					&-time{
						font-size: 30rpx;
						color: #4c4c4c;
					}
				}
				&-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 116rpx;
				}
				&-bottom{
					border-top: 1px solid #e6e6e6;
					line-height: 64rpx;
					color: #404040;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
